<!--批量导入课程步骤一-->
<template>
    <a-row :style="{width: '100%',padding: '2em'}">
        <div class="page_title">批量导入</div>
        <div  class="show_content">
          <a-steps :current="courseGroupState.current" :style="{marginLeft:'-32%'}">
            <a-step>
              <template slot="title">
                步骤一
              </template>
              <span slot="description">上传Excel表格文件</span>
            </a-step>
            <a-step title="步骤二" description="检查Excel表格识别结果确认导入" />
          </a-steps>
          <div style="width: 100%">
            <div style="padding: 2em;">
              <a-button type="primary" class="button_one" @click="uploadExcel">
                上传文件
              </a-button>
            </div>
            <div style="padding: 2em;">
              <a-button type="primary" class="button_one" @click="downExcel">
                下载Excel模板
              </a-button>
            </div>
          </div>
        </div>
        <div style="color: #ff0000; text-align: left">
            <p>注意：</p>
            <P>上传的Excel表中必须包含以下列名：所属课程，开课时间，上课老师，上课班级</P>
            <p>请下载Excel模板导入数据后再上传文件</p>
        </div>
    </a-row>
</template>

<script>
    import { mapState } from "vuex";

    export default {
        name: "BatchImportOne",
        data() {
            return {
            }
        },
        methods: {
            downExcel(){ // 下载Excel模板
                this.$store.dispatch('courseGroup/courseGroupDownload')
                .then((data) => {
                    this.$message.info("下载Excel模板成功" + data.msg);
                })
                .catch((error) => {
                    this.$message.error("下载Excel模板失败" + error.msg)
                })

            },
            uploadExcel(){ // 上传Excel文件
                this.$store.dispatch('courseGroup/courseGroupUpload', { file: "文件", token: this.accessState.token })
                    .then((data) => {
                        this.$message.info("上传Excel文件成功" + data.msg)
                    })
                    .catch((error) => {
                        this.$message.error("上传Excel文件失败" + error.msg)
                    })
            }
        },
        computed: {
            ...mapState({ // 这个是提取store中access文件夹目录下的数据
                'courseGroupState': 'courseGroup', // 获取store
                'accessState': 'access'
            })
        }
    }
</script>

<style scoped>
    .show_content{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding: 4em;
    }
    .page_title{
        font-weight: bolder;
        font-size: 1.5em;
        position: relative;
        text-align: left;
    }
    .button_one{
        padding: 1.5em 2em;
        line-height: 0;
        font-size: 1.5em;
        width: 12em;
    }

</style>
